<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
</head>
<body>
<div id="app">
    <div class="demo-input-size">
        <el-input
                size="small"
                placeholder="请输入姓名"
                suffix-icon="el-icon-date"
                style="display: inline-block;width: 200px;"
                v-model="searchInfo.bname"
        >
        </el-input>

        <el-input
                size="small"
                placeholder="请输入最小年龄"
                suffix-icon="el-icon-date"
                style="display: inline-block;width: 200px;"
                v-model="searchInfo.minAge"
        >
        </el-input>

        <el-input
                size="small"
                placeholder="请输入最大年龄"
                suffix-icon="el-icon-date"
                style="display: inline-block;width: 200px;"
                v-model="searchInfo.maxAge"
        >
        </el-input>

        <el-input
                size="small"
                placeholder="请输入性别"
                suffix-icon="el-icon-date"
                style="display: inline-block;width: 200px;"
                v-model="searchInfo.sex"
        >
        </el-input>
        <el-button type="primary" @click="searchPatient()">搜索</el-button>
        <!-- <el-button type="primary">主要按钮</el-button> -->

        <el-table
                :data="patientArr"
                border
                style="width: 100%">
            <el-table-column
                    prop="id"
                    label="编号"
                    width="80"
                    height="30">
            </el-table-column>
            <el-table-column
                    prop="bname"
                    label="姓名"
                    width="100"
                    height="30"
                    color="red">
            </el-table-column>
            <el-table-column
                    prop="age"
                    label="年龄"
                    height="30"
                    width="90">
            </el-table-column>

            <el-table-column
                    prop="sex"
                    label="性别"
                    width="90"
                    height="30">
            </el-table-column>
            <el-table-column
                    prop="riqi"
                    label="预约日期"
                    width="180"
                    height="30">
            </el-table-column>
            <el-table-column
                    prop="dname"
                    label="医生姓名"
                    height="30"
                    width="110">
            </el-table-column>
            <el-table-column
                    prop="kname"
                    label="科室"
                    height="30"
                    width="100">
            </el-table-column>

            <el-table-column
                    prop="text"
                    label="病情"
                    height="30"
                    width="160">
            </el-table-column>

            <!--<el-table-column-->
                    <!--prop="state"-->
                    <!--label="状态"-->
                    <!--height="30"-->
                    <!--width="80">-->
            <!--</el-table-column>-->
            <el-table-column prop="state" label="状态" width="100" align="center">
                <template slot-scope="scope">
             <span v-if="scope.row.state== 1" style="color: green">
                 <div class="status-icon icon1"></div>已处理
             </span>
                    <span v-if="scope.row.state== 0" style="color: orange">
                 <div class="status-icon icon0"></div>未处理
             </span>
                    </span>
                    <span v-if="scope.row.state== 2" style="color: red">
                 <div class="status-icon icon0"></div>已拒绝
             </span>
                </template>
            </el-table-column>


            <el-table-column
                    fixed="right"
                    label="操作"
                    height="30"
                    width="200">
                <template slot-scope="scope">

                    <template v-if="scope.row.state == 0">
                        <el-button type="primary" @click="addYuYue(scope.row.id)">接受</el-button>
                        <el-button type="danger" @click="refuse(scope.row.id)">拒绝</el-button>
                    </template>

                    <template v-if="scope.row.state == 1">
                        <el-button type="success" disabled>已预约</el-button>
                        <!--<el-button type="danger" @click="update(scope.row.id)">编辑</el-button>-->
                    </template>

                    <template v-if="scope.row.state == 2">
                        <el-button type="danger" disabled>已拒绝</el-button>
                        <!--<el-button type="danger" @click="refuse(scope.row.id)">芭比Q了</el-button>-->
                    </template>

                </template>
            </el-table-column>

        </el-table>
        <el-pagination
                background
                @current-change="handleCurrentChange"
                layout="prev, pager, next"
                :total="totalCountt">
        </el-pagination>
    </div>

</div>


<script>
    var haha = new Vue({
        el:"#app",
        data:{
            searchInfo:{},
            patientArr:[],
            totalCountt:0,

        },
        methods:{
            refuse(id){
                $.get("/ssm/patient/setrefuse/"+id,function (backData) {
                   if( backData.code == 1 ){
                       haha.$message.success('您拒绝该病人的预约');
                       getData(1,10);
                   }
                })
            },
            searchPatient(){
              getData(1,10);
            },
            handleCurrentChange(val){
                getData(val,10);
            },
            addYuYue(id){
                $.get("/ssm/patient/get/"+id,function (backDate) {
                  if (backDate.code == 1 ){
                      haha.$message.success('您已同意预约了该病人');
                      getData(1,10);
                  }
                });
            }
        }
    });

    function getData(a, b) {
        haha.searchInfo.pageNo = a;
        haha.searchInfo.pageCount = b;

        $.post("/ssm/patient/query",haha.searchInfo,function (backData) {
            haha.patientArr = backData.data.currentData;
            haha.totalCountt = backData.data.totalCountt;
        });
    }
    getData(1,10);
</script>
</body>
</html>